<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时间轴</title>
    <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
    <link rel="stylesheet" href="css/base.css"/>
    <style>
        .content {
            width:100%;
            min-height:720px;
            padding:50px 0;
            background: #3a3c48 url(images/content-bg.png);
        }
        .content .wrapper {
            position:relative;
            width:960px;
            background: url(images/release-bg.png) no-repeat right top;
            margin:0 auto;
        }
        .content .light {
            position:absolute;
            left:55px;
            top:-50px;
            width: 152px;
            height: 191px;
            background: url(images/light-top.png) no-repeat top center;
        }
        .content .light i {
            position:absolute;
            width:100%;
            height:100%;
            top:0px;
            background: url(images/light.png) no-repeat top center;

        }
        .content hr {
            height: 0;
            border-left: none;
            border-right: 0;
            border-top: 1px dashed #2d2f34;
            border-bottom: 1px dashed #474954;
        }
        .content .line-left {
            position:absolute;
            left:0;
            top:15px;
            width:70px;
        }
        .content .line-right {
            position:absolute;
            right:0;
            top:15px;
            width:460px;
        }
        .content .main {
            background: url(images/line-bg.png) repeat-y 249px 0;
        }
        .content .main .title {
            position:absolute;
            line-height: 40px;
            padding-left: 67px;
            left: 230px;
            top: 0;
            color: #58a6fb;
            font-size: 24px;
            background: url(images/clock.png) no-repeat left top;

        }
        .content .main .year {
            position: relative;
            z-index: 100;
        }
        .content .main .year h2 {
            width:170px;
            height:40px;
            padding-right:30px;
            font-size:24px;
            line-height:40px;
            text-align: right;
        }
        .content .main .year h2 a {
            color: #58a6fb;
        }
        .content .main .year h2 i{
            display:block;
            position:relative;
            height:0;
            width:0;
            left:190px;
            top:-20px;
            border-width:6px;
            border-style:solid;
            border-color:#59a7fb transparent transparent transparent;
            -webkit-transition:.5s;
            -moz-transition:.5s;
            -ms-transition:.5s;
            -o-transition:.5s;
            transition:.5s;
            -webkit-transform-origin:6px 3px;
            -moz-transform-origin:6px 3px;
            -ms-transform-origin:6px 3px;
            -o-transform-origin:6px 3px;
            transform-origin:6px 3px
        }
        .content .main .year .list{
            margin:10px 0;
            position:relative;
            overflow:hidden;
            -webkit-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
            -moz-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
            -ms-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
            -o-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
            transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s
        }
        .content .main .year .list ul {
            bottom: 0;
        }
        .content .main .year .list ul li {
            background: url(images/circle.png) no-repeat 235px 31px;
            padding: 30px 0;
            color: #a1a4b8;
        }
        .cls {
            zoom: 1;
        }
        .cls:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .content .main .year .list ul li .date{
            font-size:18px;
            line-height:32px;
            color:#bec1d5
        }
        .content .main .year .list ul li .intro {
            font-size: 18px;
            line-height: 32px;
            color: #63d029;
        }
        .content .main .year .list ul li .date,.content .main .year .list ul li .version{
            float:left;
            display:block;
            clear:left;
            width:200px;
            line-height:24px;
            text-align:right
        }
        .content .main .year .list ul li .intro, .content .main .year .list ul li .more {
            float: left;
            display: block;
            width: 400px;
            margin-left: 100px;
            line-height: 24px;
        }
        .content .wrapper:first-child .main .year.close h2 i{
            transform:rotate(-90deg);
            -webkit-transform:rotate(-90deg);
            -moz-transform:rotate(-90deg);
            -ms-transform:rotate(-90deg);
            -o-transform:rotate(-90deg)
        }
        .content .wrapper:first-child .main .year.close .list{
            opacity:0;
            height:0!important;
        }


    </style>
</head>
<body>
    <div class="content">
        <div class="wrapper">
            <!--这里是灯光 -->
            <div class="light"><i></i></div>
            <!--双线-->
            <hr class="line-left"/>
            <hr class="line-right"/>
            <!--主题内容开始,main的线背景-->
            <div class="main">
                <!--标题-->
                <h1 class="title">李志远的时间轴</h1>
                <!--年份开始,除了wrapper,main,year其余的所有都是绝对定位 -->
                <div class="year">
                    <h2><a href="#">2014年<i></i></a></h2>
                    <div class="list">
                        <ul>
                            <li class="cls">
                                <p class="date">3月25号</p>
                                <p class="intro">我的标题是什么</p>
                                <p class="version">&nbsp;</p>
                                <div class="more">
                                    <p>我的内容1</p>
                                    <p>我的内容2</p>
                                    <p>我的内容3</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    $(".main .year .list").each(function (e, target) {
        var $target=  $(target),
                $ul = $target.find("ul");
        $target.height($ul.outerHeight()), $ul.css("position", "absolute");
    });
    $(".main .year>h2>a").click(function (e) {
        e.preventDefault();
        $(this).parents(".year").toggleClass("close");
    });
</script>